<template>
  <h1>{{ num }}</h1>
  <button @click="num++">点击++</button>
  <hr/>
  <helloWord v-if="flag"></helloWord>
  <button @click="flag=!flag">点击切换</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
// 引入子组件
import helloWord from "./components/helloWord.vue";
import { onBeforeMount , onMounted ,
  onBeforeUpdate , onUpdated , ref} from "vue";
  let flag = ref(true)

  // ====================================
  let num = ref(0)
//  1.挂载之前执行
onBeforeMount(()=>{
  console.log('onBeforeMount');
})
// 2.挂载之后执行
onMounted(()=>{
  // let h = document.querySelector("h1")
  // console.log(h);
  console.log('onMounted');
})
// 3.更新组件执之前执行
onBeforeUpdate(()=>{
  console.log('onBeforeUpdate');
})
// 4.更新之后
onUpdated(()=>{
  console.log('onUpdated');
})
</script>
<script>
  export  default {
    name:"App"
  }
</script>


